<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style type="text/css">
        .sub{
            display: inline-block;
            width: 100px;
        }
    </style>
</head>
<body>
    

    <div id="app">
        <p><label class="sub">姓名：
        </label><input type="text" v-model.lazy="name">
        </p>

        <p><label class="sub">性别：</label>
        <label for="male"><input type="radio" v-model="gender" value="male" id="male">男</label>
        <label for="female"><input type="radio" v-model="gender" value="female" id="female">女</label>
        </p>

        <p><label class="sub">爱好：</label>
        <label for="check1"><input type="checkbox" v-model="hobbies" value="篮球" id="check1">篮球</label>
        <label for="check2"><input type="checkbox" v-model="hobbies" value="唱歌" id="check2">篮球</label>
        <label for="check3"><input type="checkbox" v-model="hobbies" value="写代码" id="check3">篮球</label>
        </p>

        <p><label class="sub">职业：</label>
            <select v-model="job">
                <option value="">老板</option>
                <option value="">软件工程师</option>
                <option value="">律师</option>
                <option value="">教师</option>
            </select>
        </p>

        <p><label class="sub">个人简介：</label>
            <textarea cols="22" rows="2" v-model="info"></textarea>
        </p>

        <p><label class="sub">年龄：</label>
            <input type="number" v-model="age">
        </p>

        <p><label class="sub">城市：</label>
            <select v-model="city">
                <option value="" disabled="disabled">请选择城市</option>
                <option value="">厦门</option>
                <option value="">龙岩</option>
                <option value="">福州</option>
                <option value="">漳州</option>
            </select>
        </p>

        <p>
            <label for="ag"><input type="checkbox" v-model="agree" id="ag">同意协议</label>
            <input type="button" value="提交" :disabled="!agree">
        </p>
    </div>


    <script type="text/javascript">
        var vm =new Vue({
            el: '#app',
            data: {
                name:'',
                gender:'',
                hobbies:[],
                job:'',
                info:'',
                age:'',
                city:'',
                agree:''
            }
        })

    </script>
</body>
</html>